@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}

@mixin absolute($top: 0, $right: 0, $bottom: null, $left: null, $zIndex: 1) {
  position: absolute;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
  z-index: $zIndex;
}

/**
  *imageSrc 路径
  *width 宽度
  *height 高度
*/
@mixin bgImg(
  $imageSrc,
  $width: 100%,
  $height: 100%,
  $position: center,
  $repeat: no-repeat
) {
  background: url($imageSrc) $repeat $position;
  background-size: $width $height;
}


// 单行文本溢出
@mixin text-ellipsis() {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 多行文本溢出
@mixin text-ellipsis-multiline($num) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $num;
  -webkit-box-orient: vertical;
}

// 跨浏览器的透明度设置
@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}

// 弹性布局
@mixin flex($align: center, $justify: center) {
  display: flex;
  align-items: $align;
  justify-content: $justify;
}

// 设置宽高
@mixin whl($w, $h, $lh: $h) {
  width: $w;
  height: $h;
  line-height: $lh;
}

// 设置宽高
@mixin wh($w:100%, $h:100%) {
  width: $w;
  height: $h;
}

// 设置字体大小，颜色
@mixin fc($size, $color) {
  font-size: $size;
  color: $color;
}

// 圆角边框
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

// 设置字体颜色、背景颜色、边框颜色
@mixin colors($color, $backgroundColor: initial, $borderColor: initial) {
  color: $color;
  background-color: $backgroundColor;
  border-color: $borderColor;
}